<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="../../set.jsp" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>管理员平台</title>
<jsp:include page="../../cite.jsp" />
<link rel="stylesheet" href="${_path}/theme/theme-menu.css">
<script src="${_path}/lib/echarts-3.1.1/echarts.min.js"></script>
<style>
.body {
	padding-top: 40px;
}

.body .chart {
	height: 300px;
}
</style>
</head>
<body>
	<jsp:include page="../../header.jsp" />
	<jsp:include page="./manage-menu.jsp?active=monitor" />
	<div class="body">
		<div class="col-sm-6">
			<div class="panel panel-default">
				<div class="panel-heading">内存占用</div>
				<div class="panel-body">
					<div class="chart" id="memory"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="panel panel-default">
				<div class="panel-heading">磁盘空间</div>
				<div class="panel-body">
					<div class="chart" id="space"></div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function() {
			setTimeout(function() {
				initMemory();
				initSpace();
			}, 1);
			function initMemory() {
				var memoryChart = echarts.init($('#memory')[0]);
				var xs = [], useds = [], totals = [], maxs = [];
				for (i = 0; i < 1000; i++) {
					xs.push('        ');
					useds.push(0);
					totals.push(0);
					maxs.push(0);
				}
				memoryChart.setOption({
					toolbox : {
						feature : {
							saveAsImage : {
								show : true
							}
						}
					},
					legend : {
						data : [ '已用空间', '分配空间', '最大分配空间' ]
					},
					xAxis : [ {
						type : 'category',
						data : xs,
						boundaryGap : false
					} ],
					yAxis : [ {
						type : 'value',
						precision : 0,
						name : '单位：MB'
					} ],
					dataZoom : [ {
						show : true,
						start : 0,
						end : 10
					}, {
						type : 'inside',
						start : 60,
						end : 80
					} ],
					grid : {
						top : 50,
						bottom : 80
					},
					series : [ {
						name : '已用空间',
						type : 'line',
						symbol : 'none',
						areaStyle : {
							normal : {}
						},
						data : useds
					}, {
						name : '分配空间',
						type : 'line',
						symbol : 'none',
						data : totals
					}, {
						name : '最大分配空间',
						type : 'line',
						symbol : 'none',
						data : maxs
					} ]
				});
				var inv = setInterval(function() {
					addData();
				}, 1000);
				addData();
				function addData() {
					$.ajax({
						url : './memory/',
						type : 'post',
						dataType : 'json',
						success : function(result) {
							if (result.succ == 0) {
								add(getCurrent(), xs);
								add(parseInt(result.data.used / 1024 / 1024), useds);
								add(parseInt(result.data.total / 1024 / 1024), totals);
								add(parseInt(result.data.max / 1024 / 1024), maxs);
								memoryChart.setOption({
									xAxis : [ {
										data : xs
									} ],
									series : [ {
										data : useds
									}, {
										data : totals
									}, {
										data : maxs
									} ]
								});
							} else {
								clearInterval(inv);
								console.log('获取内存占用情况失败：' + result.message);
							}
						},
						error : function() {
							clearInterval(inv);
							console.log('获取内存占用情况失败');
						}
					});
				}
			}
			function initSpace() {
				var spaceChart = echarts.init($('#space')[0]);
				var xs = [], useds = [], totals = [];
				for (i = 0; i < 500; i++) {
					xs.push('        ');
					useds.push(0);
					totals.push(0);
				}
				spaceChart.setOption({
					toolbox : {
						feature : {
							saveAsImage : {
								show : true
							}
						}
					},
					legend : {
						data : [ '已用空间', '全部空间' ]
					},
					xAxis : [ {
						type : 'category',
						data : xs,
						boundaryGap : false
					} ],
					yAxis : [ {
						type : 'value',
						precision : 0,
						name : '单位：GB'
					} ],
					dataZoom : [ {
						show : true,
						start : 0,
						end : 10
					}, {
						type : 'inside',
						start : 60,
						end : 80
					} ],
					grid : {
						top : 50,
						bottom : 80
					},
					series : [ {
						name : '已用空间',
						type : 'line',
						symbol : 'none',
						areaStyle : {
							normal : {}
						},
						data : useds
					}, {
						name : '全部空间',
						type : 'line',
						symbol : 'none',
						data : totals
					} ]
				});
				var inv = setInterval(function() {
					addData();
				}, 2000);
				addData();
				function addData() {
					$.ajax({
						url : './space/',
						type : 'post',
						dataType : 'json',
						success : function(result) {
							if (result.succ == 0) {
								var used = 0, free = 0;
								$.each(result.data, function(i, n) {
									used += n.used / 1024 / 1024 / 1024;
									free += n.free / 1024 / 1024 / 1024;
								});
								add(getCurrent(), xs);
								add(parseInt(used), useds);
								add(parseInt(used + free), totals);
								spaceChart.setOption({
									xAxis : [ {
										data : xs
									} ],
									series : [ {
										data : useds
									}, {
										data : totals
									} ]
								});
							} else {
								clearInterval(inv);
								console.log('获取磁盘空间占用情况失败：' + result.message);
							}
						},
						error : function() {
							clearInterval(inv);
							console.log('获取磁盘空间占用情况失败');
						}
					});
				}
			}
			function getCurrent() {
				var date = new Date();
				return date.getHours() + '.' + date.getMinutes() + '.' + date.getSeconds();
			}
			function add(data, datas) {
				datas.unshift(data);
				datas.pop();
			}
		});
	</script>
</body>
</html>